import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
import './index.less'
import food from '../../img/food.png'
import searchImg from '../../img/searchimg.png'

export default class orderInformation extends Component {

  config = {
    navigationBarTitleText: '订单信息',
  }


  // componentWillMount () { }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const data = {
      information:{
        img:'http://iph.href.lu/300x200?text=占位',
        name:'皖北地锅鸡2-3人餐',
        number:1,
      },
      order:[
        {
          id:1,
          title:'订单号码',
          text:888888888888
        },{
          id:2,
          title:'下单时间',
          text:'2018-12-27 12:23:23'
        },{
          id:3,
          title:'支付方式',
          text:'在线支付'
        }
      ],
      prices:[
        {
          id:1,
          text:'原价',
          price:123
        },{
          id:2,
          text:'平台价格',
          price:111
        }
      ],
      buttons:[
        {
          id:1,
          text:'联系商户'
        },{
          id:2,
          text:'地址导航',
        },{
          id:3,
          text:'取消订单'
        }
      ]
    }
    return (
      <View className='index'>
        <Text className='order-information-text'>订单信息</Text>
        {/**订单信息 */}
        <View className='order-information'>
          <View className='information-first-box'>
            <Image src={data.information.img} className='information-img' />
            <Text className='information-name'>{data.information.name}</Text>
            <Text className='information-number'>数量：{data.information.number}</Text>
          </View>
          <View className='information-bottom-box'>
            {data.order.map(item=>(
              <View key={item.id} className='information-box'>
                <Text className='information-title'>{item.title}</Text>
                <Text className='information-text'>{item.text}</Text>
              </View>  
            ))}
          </View>
        </View>
        <Text className='order-information-text'>订单金额</Text>
        <View className='order-information'>
          <View className='order-price-first-box'>
              {data.prices.map(price=>(
                <View key={price.id} className='order-price-box'>
                  <Text className='order-price-text'>{price.text}</Text>
                  <Text className='order-price-price'>￥{price.price}</Text>
                </View>
              ))}
          </View>
          <View className='order-price-bottom-box'>
              {data.buttons.map(button=>(
                <View key={button.id} className='button-box'>
                  <Text className='button-box-text'>{button.text}</Text>
                </View>  
              ))}
          </View>  
        </View>
      </View>
    )
  }
}

